<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>MeteoCal - Registration</title>
        <h:outputStylesheet library="css" name="myTheme.css"/>
        <h:outputStylesheet library="css" name="login-register.css"/>
    </h:head>
    <h:body styleClass="loginRegClass">
        <div align="center">
                <p:graphicImage library="images" name="logo.png" style="padding: 50px"/>
            </div>
        <h:form>
            <p:growl id="messages"/>
            <p:panel id="registrationPanel" header="Registration Form" styleClass="regPanel">
                <p:focus context="registrationPanel"/>
                <h:panelGrid columns="2" id="regGrid" columnClasses="rightAlignCol,leftAlignCol">
                    <h:outputLabel for="name">Username: </h:outputLabel>
                    <p:inputText id="name" value="#{registrationBean.user.username}">
                        <p:ajax update="messages"/>
                    </p:inputText>
                    
                    <h:outputLabel for="email">Email: </h:outputLabel>
                    <p:inputText id="email" value="#{registrationBean.user.email}" >
                        <p:ajax update="messages"/>
                    </p:inputText>
                    
                    <h:outputLabel for="password">Password: </h:outputLabel>
                    <p:password id="password" value="#{registrationBean.user.password}"
                                feedback="true" match="pwd2" label="Password">
                        </p:password>

                    <h:outputLabel for="pwd2">Confirm Password: </h:outputLabel>
                    <p:password id="pwd2" label="Confirm Password" required="true" 
                                requiredMessage="Confirm the password!"/>
                </h:panelGrid>
                <p:link outcome="login" value="Back" style="padding-right: 15px"/>
                <p:commandButton value="Register" update="regGrid, messages"
                                 action="#{registrationBean.register()}" />

            </p:panel>
        </h:form>
    </h:body>
</html>

